<!--  -->
<template>
  <div class="container">
    <div class="box">
      <div class="item mb_0">
        <div>
          <span class="red">*</span>医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：
        </div>
        <div>
          <cube-select
            :disabled="pageType == 'detail'"
            v-model="form.hospitalId"
            :options="hospitalList"
            title="请选择医院"
            placeholder
            @change="selectHospital()"
          ></cube-select>
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
        </div>
      </div>
      <div class="item pb_0">
        <div>
          <span class="red">*</span>项目分类：
        </div>
        <div>
          <cube-select
            :disabled="pageType == 'detail'"
            v-model="form.groupCategoryId"
            :options="groupCategoryList"
            title="请选择项目分类"
            placeholder
            @change="selectCategroy()"
          ></cube-select>
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
        </div>
      </div>
      <div class="item">
        <div>
          <span class="red">*</span>项目名称：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.projectName"
            placeholder="请输入项目名称"
          />
        </div>
      </div>
      <div class="item">
        <div>
          <span class="red">*</span>项目金额：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.projectPrice"
            placeholder="请输入项目金额"
          />
        </div>
      </div>
      <div class="item">
        <div>
          <span class="red">*</span>医院结算金额：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.hospitalPrice"
            placeholder="请输入医院结算金额"
          />
        </div>
      </div>
      <div class="item">
        <div>
          <span class="red">*</span>用户姓名：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.relname"
            placeholder="请输入姓名"
          />
        </div>
      </div>
      <div class="item">
        <div>
          <span class="red">*</span>用户手机号：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.userPone"
            @change="userPhones"
            placeholder="请输入手机号"
          />
        </div>
      </div>
      <div class="item">
        <div>
          &nbsp;&nbsp;推荐人姓名：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.ref_name"
            placeholder="请输入手机号"
          />
        </div>
      </div>
      <div class="item">
        <div>
          &nbsp;&nbsp;推荐人手机号：
          <input
            type="text"
            :disabled="pageType == 'detail'"
            v-model="form.ref_pone"
            placeholder="请输入手机号"
          />
        </div>
      </div>
      <div v-if="pageType == 'detail'">
        <div class="item">
          <div>
            &nbsp;&nbsp;报单时间：
            <input type="text" disabled v-model="form.create_time" />
          </div>
        </div>
        <div class="item">
          <div>
            &nbsp;&nbsp;报单人：
            <input type="text" disabled v-model="form.declare_name" />
          </div>
        </div>
        <div class="item" v-if="form.write_off_status == 1">
          <div>
            &nbsp;&nbsp;完成项目时间：
            <input type="text" disabled v-model="form.complete_time" />
          </div>
        </div>
        <div class="item" v-if="form.write_off_status == 1">
          <div>
            &nbsp;&nbsp;核销人：
            <input type="text" disabled v-model="form.write_off_user" />
          </div>
        </div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="remark">
      备注
      <div class="text-area">
        <textarea v-model="form.dd_remark" :disabled="pageType == 'detail'"></textarea>
      </div>
    </div>
    <!-- 付款凭证 -->
    <div class="uploadMoudle" v-if="pageType != 'detail'">
      <p>付款凭证：</p>
      <cube-upload
        v-model="img"
        :action="action"
        :max="5"
        @files-added="filesAddedOrder"
        @file-success="fileSuccessOrder"
        @file-removed="fileRemovedOrder"
      />
    </div>
    <!-- 详情付款凭证 -->
    <div
      class="uploadMoudle"
      v-if="form.dd_images"
      v-show="pageType == 'detail' && form.dd_images.length>0"
    >
      <p>付款凭证：</p>
      <div class="dfs">
        <div class="img_size" v-for="(item,index) in form.dd_images" :key="index">
          <img v-if="imgUrl" :src="imgUrl+item" alt />
        </div>
      </div>
    </div>
    <div v-if="pageType != 'detail'" class="btn" @click="submit">提交</div>
  </div>
</template>

<script>
import api from "../../assets/js/api";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      form: {
        userPone:'',
        user_id:'',
        relname:'',
        hospitalId:'',
        groupCategoryId:'',
        projectName:'',
        projectPrice:'',
        hospitalPrice:'',
        dd_remark:'',
        ref_name:'',
        ref_pone:'',
        images:[],
        dd_id:'',
        write_off_status: '',  //是否核销
        is_new:'' //是否新用户
      },
      imgUrl: "https://img.yuepinyuemei.com/",
      hospitalList: [],
      groupCategoryList: [],
      //上传组件使用
      action: {
        // 正式服
        target: "https://act.yuepinyuemei.com/api/upload/img",
        data: {
          dirPath: "order"
        }
      },
      img:[],
      dd_id: '',
      pageType: 'add',
    };
  },

  mounted() {
    this.pageType = this.$route.query.pageType;
    console.log('pageType',this.pageType);

    document.title = this.pageType == "add" ?"创建报单": this.pageType == "detail"? "传统报单详情":"修改报单";
    this.axios.defaults.baseURL = api;
    this.selectCategroy();
    this.selectHospital();
    
    if(this.pageType != 'add') {
      this.dd_id = this.$route.query.dd_id;
    }
    if(this.pageType == 'detail' || this.pageType == 'edit') this.getDetail();
  },

  methods: {
    // 手机失焦
    userPhones() {
      // if (this.form.userPhone) {
      console.log(111);
      this.axios
        .post("api/butler/declaration/checkuser", {
          relname:this.form.relname,
          userPone: this.form.userPone
        })
        .then(res => {
          if (res.data.code == 200) {
            this.form = Object.assign({},this.form,res.data.data);
            // console.log('form',this.form)
          } else {
            Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        });

      // }
    },
    // 选择医院
    selectHospital() {
      this.axios.post("api/butler/declaration/hospital").then(res => {
        if (res.data.code == 200) {
          let arr = res.data.data;
          if (arr.length > 0) {
            res.data.data.forEach(item => {
              item.text = item.hospital_name;
              item.value = item.id;
            });
          }
          this.hospitalList = arr;
          console.log("hos", this.hospitalList);
        }
      });
    },
    // 获取报单项目分类
    // getProjectCategory() {

    // },
    selectCategroy() {
      this.axios
        .post("api/butler/declaration/getProjectCategory", {})
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            if (arr.length > 0) {
              arr.forEach(item => {
                item.text = item.category_name;
                item.value = item.id;
              });
            }
            this.groupCategoryList = arr;
          } else {
            Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        });
    },
    //图片上传相关操作
    filesAddedOrder(files) {
      //消费凭证
      let hasIgnore = false;
      const maxSize = 20 * 1024 * 1024; // 20M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "图片上传失败，不能大于20M"
        }).show();
    },
    fileSuccessOrder(file) {
      this.form.images.push(file.response.data.url);
      console.log(this.form.images);
    },
    //图片上传 手动删除
    fileRemovedOrder(file) {
      let arr = [...this.form.images]
      arr.forEach((item,i) => {
        if (file.url == this.imgUrl+item || file.response.data.url == item) {
          arr.splice(i,1);
        }
      })
      this.$set(this.form,'images', arr)
    },
    // 获取详情
    async getDetail() {
      let res = await this.axios.post("api/butler/declaration/details",{dd_id: this.dd_id});
      if (res.data.code == 200) {
        let {user_pone,hospital_id,group_category_id,dd_project_name,project_price,hospital_price,username,hospital_name,group_category_name,dd_images} = res.data.data;
        this.form = Object.assign({},res.data.data,{hospitalId:hospital_id,groupCategoryId:group_category_id,userPone:user_pone,projectName:dd_project_name,projectPrice:project_price,hospitalPrice:hospital_price,relname:username})
        if (this.pageType == 'edit'){
          // 将需要上传的图片url先保存
          this.$set(this.form, 'images', dd_images);
          // 为图片显示新造对象
          let img =  dd_images.map(item=>{
            return {url:this.imgUrl + item}
          })
          this.img = img;
        }
      }
      console.log(res);
    },
    // 提交
    async submit() {
      if(this.pageType == 'add') delete this.form.dd_id;
      console.log(this.form.images);
      let res = await this.axios.post("api/butler/declaration/createDeclaration",this.form);
      if(res.data.code == 200) {
        this.$createToast({
          type: "success",
          time: 2000,
          txt: res.data.msg
        }).show();
        // this.$router.go(-1);
        this.$router.push('/traditionalForm')
      }else {
        this.$createToast({
          type: "warn",
          time: 2000,
          txt: res.data.msg
        }).show();
      }
      
      console.log('提交',res);
    },
  }
};
</script>
<style  scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #eee;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.box {
  width: 100%;
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.pb_0 {
  padding-bottom: 0px !important;
}

.select-icon {
  display: block;
  font-size: 20px;
  position: absolute !important;
  right: 0px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 99;
}
.cube-select-icon {
  border: 0 !important;
  display: none !important;
}
.cube-select {
  border: none;
  width: 250px;
  margin-top: 2px;
  box-sizing: border-box;
}
.cube-select /deep/ .cube-select-text {
  width: 100%;
  display: inline-block;
  text-align: left;
}
.cube-select::after {
  border: 0 !important;
}
.mb_0 {
  margin-bottom: 5px !important;
  padding-bottom: 0 !important;
}
.red {
  color: red;
  margin-right: 3px;
}
.remark {
  width: 100%;
  height: 183px;
  padding: 13px 15px;
  background: #fff;
  box-sizing: border-box;
}

textarea {
  width: 345px;
  height: 120px;
  padding: 9px;
  border: 1px solid #eee;
  margin-top: 10px;
  box-sizing: border-box;
}
.uploadMoudle {
  margin-top: 10px;
  background-color: #fff;
  /* display: flex;
  flex-direction: column; */
  padding: 13px 15px;
}
.uploadMoudle p {
  font-size: 16px;
  text-align: left;
  margin-bottom: 13px;
}
input::-webkit-input-placeholder {
  color: #c5c5c5;
  font-weight: 400;
}
.btn {
  width: 226px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, #ffdddd 0%, #ff83a6 100%);
  border-radius: 24px;
  margin: 70px auto;
  box-sizing: border-box;
}
.img_size {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.dfs {
  display: flex;
  align-items: center;
}
.img_size img {
  width: 100%;
  height: 100%;
}
</style>